<template>
  <div class="execution">
    <basic-container>
      <el-card class="operate-container" shadow="never">
        <el-button
          class="btn-add"
          icon="el-icon-plus"
          type="primary"
          @click="addTotal()"
          size="mini"
        >
          添加
        </el-button>
      </el-card>
      <div style="margin-top: 10px">
        <el-table
          :data="list"
          border
          :header-cell-style="{ color: '#4D4D4D', background: '#fafafa' }"
        >

          <el-table-column
            label="总收益百分比"
            align="center"
            prop="totalEarn"
          ></el-table-column>
          <el-table-column
            label="操作人"
            align="center"
            prop="operatorName"
          ></el-table-column>
          <el-table-column
            label="操作时间"
            align="center"
            prop="createTime"
          ></el-table-column>
        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes,prev, pager, next,jumper"
          :page-size="listQuery.size"
          :page-sizes="[5, 10, 15]"
          :current-page.sync="listQuery.current"
          :total="total"
        >
        </el-pagination>
      </div>

      <el-dialog title="新增" :visible.sync="dialogVisible" width="40%">
        <el-form
          :label-position="labelPosition"
          :rules="rules"
          ref="formLabel"
          label-width="150px"
          :model="formLabel"
        >
          <el-form-item label="总百分比：" prop="totalEarn">
            <el-input
              style="width: 203px"
              type="number"
              v-model="formLabel.totalEarn"
              placeholder="百分比"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleDetermine('formLabel')"
              type="primary"
              size="small"
            >
              确定
            </el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import "@/styles/index.scss";
import { fetchList, setUpTotalEarn, getTotalEarns } from "@/api/profit/totalRevenue/index";

export default {
  data() {
    return {
      activeName: "first",
      listQuery: {
        current: 1,
        size: 10,
      },
      list: [],
      total: 0,
      formLabel: {
        totalEarn: null,
      },
      rules: {
        totalEarn: [
          { required: true, message: "请填写总百分比", trigger: "blur" },
        ],
      },
      labelPosition: "right",
      dialogVisible: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getList();
    },
    getList() {
      fetchList(this.listQuery).then((res) => {
        this.list = res.data.data.records;
        this.total = res.data.data.total;
        this.getNewList();
      });
    },
    getNewList() {
      getTotalEarns().then((res) => {
        this.formLabel.totalEarn = res.data.data;
      });
    },

    cancelEdit(row) {
      row.totalEarn = row.Title;
      row.edit = false;
      this.$message({
        message: "百分比已恢复原值",
        type: "warning",
      });
    },
    addTotal() {
      this.dialogVisible = true;
    },

    handleDetermine(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          setUpTotalEarn(this.formLabel).then((res) => {
            this.dialogVisible = false;
            if (res.data.code === 200) {
              this.$message({
                message: res.data.msg,
                type: "success",
                duration: 1000,
              });
              this.formLabel.totalEarn = null
              this.getList();
            } else {
              this.$message({
                message: res.data.msg,
                type: "danger",
                duration: 1000,
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
